<template>
  <div>
    <el-card class="box-card">
      <!-- 头部公共组件 -->
      <card-header>
        <!-- 左侧 -->
        <template #left>
          <el-row type="flex" align="middle">
            <el-col :span="6">
              <!-- 搜索框 -->
              <el-input
                v-model="searchInput"
                placeholder="根据用户名搜索"
              ></el-input
            ></el-col>
            <el-col :span="12">
              <!-- 清除 -->
              <el-button size="small" style="margin-left: 10px" @click="onClear"
                >清除</el-button>
              <!-- 搜索 -->
              <el-button type="primary" size="small" @click="onSearch"
                >搜索</el-button
              ></el-col>
          </el-row>
        </template>
        <!-- 右侧 -->
        <template #right>
          <!-- 新增权限组 -->
          <el-button
            type="success"
            icon="el-icon-edit"
            size="small"
            @click="addClick"
            >新增权限组</el-button>
        </template>
      </card-header>
      <!-- 消息提示 -->
      <el-alert
        :title="'共条' + total + '数据'"
        type="info"
        show-icon
        style="margin-top: 20px"
        :closable="false"
      >
      </el-alert>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        ref="tableData"
        show-header
        tooltip-effect="dark"
        style="width: 100%; margin-top: 20px"
        highlight-current-row
        :header-cell-style="{
          background: '#fafafa',
          color: '#A2AAB4',
          'border-bottom': 'solid 1px #e8e8e8',
        }"
      >
        <!-- 多选 -->
        <el-table-column type="selection" width="55"> </el-table-column>
        <!-- 姓名栏 -->
        <el-table-column prop="title" label="用户名"  align="center">
        </el-table-column>
        <!-- 日期栏 -->
        <el-table-column
          sortable
          prop="create_date"
          label="日期"
          align="center"
        >
        <template slot-scope="{ row }">
          {{ changeTime(row.create_date,'{y}-{m}-{d}')}}
        </template>
        </el-table-column>
        <!-- 操作栏 -->
        <el-table-column
          prop="operate"
          label="操作"

          align="center"
          width="150"
        >
          <template slot-scope="{ row }">
            <!-- 编辑 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              plain
              @click="updateClick(row.id)"
            ></el-button>
            <!-- 删除 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="delClick(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination
        :page="pageData"
        :counts="total"
        @changePageSize="changePageSize"
        @changeCurrentPage="changeCurrentPage"
      ></pagination>
      <!-- 权限弹层 -->
    <permissions-add
      ref="permissionsAdd"
      @newDataes="onNewData"
      @handleOpenModal="dialogVisible = true"
      @handleCloseModal="dialogVisible = false"
      :text="text"
      :pageTitle="pageTitle"
      v-model="dialogVisible"
    />
    </el-card>
  </div>
</template>
<script>
import permissionsAdd from '../../module-manage/components/permissions-add.vue'
import { list, detail, remove } from '@/api/base/permissions'

// import { list as getMenusList } from '@/api/base/menus'
import { parseTimeByString } from '@/filters'
export default {
  name: 'permission',
  components: { permissionsAdd },
  data () {
    return {
      // 搜索
      searchInput: '',
      id: '',
      // 分页设置
      pageData: {
        currentPage: 1,
        pagesize: 10
      },
      // 列表数据
      tableData: [],
      // 数据条数
      total: 0,
      // 弹窗开启
      dialogVisible: false,
      // 树形结构数据
      treeData: [],
      text: '创建',
      pageTitle: '权限组'
    }
  },

  created () {
    this.permissionsList()
  },

  methods: {
    changeTime (time, format) {
      return parseTimeByString(time, format)
    },
    // 获取权限列表
    async permissionsList () {
      const res = await list({
        page: this.pageData.currentPage,
        pagesize: this.pageData.pagesize,
        title: this.searchInput
      })
      this.tableData = res.data.list
      this.total = res.data.counts
    },
    // 改变每页显示条数
    changePageSize (e) {
      this.pageData.pagesize = e
      // 改变以后重新获取列表
      this.permissionsList()
    },
    // 跳转
    changeCurrentPage (e) {
      this.pageData.currentPage = e
      this.permissionsList()
    },
    // 添加
    async addClick () {
      this.title = '创建权限组'
      this.dialogVisible = true
    },
    // 编辑
    async updateClick (id) {
      const res = await detail({
        id: id
      })
      console.log(res)
      // console.log('修改')
      this.text = '修改'
      this.$nextTick(() => {
        this.$refs.permissionsAdd.dialogFormV(res.data)
      })
    },
    onNewData (data) {
      console.log(data)
      if (data.id) {
        this.$message.success('更新成功')
      } else {
        this.$message.success('添加成功')
      }
      this.permissionsList()
    },
    // 删除
    delClick (row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: row.id })
          this.permissionsList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 搜索
    async onSearch () {
      this.permissionsList()
    },
    // 清除
    onClear () {
      this.searchInput = ''
      this.permissionsList()
    }
  }
}
</script>
